<template>
  <div class="main">
    <div class="main_one">
      <div class="left">
        <el-form ref="dataForm" :rules="rules" class="form" :model="temp" label-position="right" label-width="90px">
          <el-form-item style="width: 200%;" label="来电号码:" prop="orderCode">
            <el-input v-model="temp.orderCode" style="width: 250px;" placeholder="请输入" />
            <el-button type="primary" icon="el-icon-search" @click="searchForPhone">查询</el-button>
          </el-form-item>
          <div class="moneyinfo">
            <span>余额 ：{{ cmsCodeData.cashMoney?cmsCodeData.cashMoney/100:"" }}</span>
            <span>积分 ：</span>
            <span>押金 ： {{ phoneData.deposit?phoneData.deposit:'' }}</span>
            <span>最近安检 : </span>
          <!-- <span>:{{}}</span> -->
          </div>
          <el-form-item style="" label="客户编号:" prop="csmCode">
            <el-input v-model="temp.csmCode" style="width: 100%;" :disabled="true" />
          </el-form-item>
          <el-form-item label="客户名称:" prop="csmName">
            <el-input v-model="temp.csmName" style="width: 100%;" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="客户类型:" prop="csmType">
            <el-select v-model="temp.csmType" style="width: 100%;" placeholder="请选择">
              <el-option :value="1" label="地址1" />
              <el-option :value="2" label="地址2" />
              <el-option :value="3" label="地址3" />
            </el-select>
          </el-form-item>
          <el-form-item label="电话:" prop="contactPhone">
            <label slot="label">电&emsp;&emsp;话:</label>
            <el-input v-model="temp.contactPhone" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="联系人:" prop="contact">
            <el-input v-model="temp.contact" style="width: 100%;" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="所属机构:" prop="orgName">
            <el-select v-model="temp.orgName" style="width: 100%;" placeholder="请选择">
              <el-option :value="1" label="地址1" />
              <el-option :value="2" label="地址2" />
              <el-option :value="3" label="地址3" />
            </el-select>
          </el-form-item>

          <el-form-item style="width: 100%;" label="所在区域:" prop="orderCode">
            <el-select v-model="temp.address" style="width: 260px;" placeholder="请选择">
              <el-option :value="1" label="地址1" />
              <el-option :value="2" label="地址2" />
              <el-option :value="3" label="地址3" />
            </el-select>
            <el-input v-model="temp.csmRgAddress" style="width: 300px;" placeholder="请输入" />
            <el-input v-model="temp.orderCod1e" style="width: 50px;" placeholder="" />
            <span style="margin-left: 20px;">层</span>
          </el-form-item>

          <el-form-item v-if="settingList.IdCard" label="身份证号:" prop="IdCard">
            <el-input v-model="temp.IdCard" style="width: 100%;" placeholder="请输入" />
          </el-form-item>
          <el-form-item v-if="settingList.license" label=" 营业执照:" prop="license">
            <el-input v-model="temp.license" style="width: 100%;" placeholder="请输入" />
          </el-form-item>
          <el-form-item v-if="settingList.salesman" label="销售员: " prop="salesman">
            <el-input v-model="temp.salesman" style="width: 100%;" readonly placeholder="请输入">
              <el-button slot="append" class="append-search" @click="searchForPhone">查询</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label-width="90px" label="客户备注:" prop="remark" class="block">
            <el-input v-model="temp.remark" type="textarea" :rows="2" maxlength="255" show-word-limit />
          </el-form-item>
          <el-form-item>
            <el-button style="margin-top: 10px;" type="primary" icon="el-icon-document-add" @click="saveUser">保存客戶</el-button>
          </el-form-item>
        </el-form>
        <div class="cardBox_phone" style="display: flex;">
          <el-card class="box-card" style="width: 40%; margin-right: 10px;">
            <div slot="header" class="clearfix">
              <span>关联电话</span>
            </div>
            <div style=" height: 110px; max-height: 110px; overflow: auto;">
              <div ref="selectPhone">
                <span v-for="(l,i) in phoneItems" :key="i" class="text item" @click="selectPhone(i,l)">
                  <div>
                    <span style="margin-right: 5px;">{{ l.csmPhone }}</span>
                    <span>{{ l.contact }}</span>
                  </div>
                  <!-- <el-button style="border:0;color:red" circle icon="el-icon-close" /> -->
                  <span>   <i class="el-icon-close" style="color: red;" @click.stop="delPhone" />&nbsp;&nbsp;</span>
                </span>
              </div>
            </div>
          </el-card>
          <el-card class="box-card border" style="width: 60%;">
            <div slot="header" class="clearfix">
              <span>关联地址</span>
            </div>
            <div style="  height: 110px; max-height: 110px; overflow: auto;">
              <ul ref="selectAddress">
                <li v-for="(l,i) in addressItems" :key="i" class="text item" @click="selectAddress(i,l)">
                  <div>
                    <span>{{ l.csmAddress }}</span>
                  </div>
                  <span><i class="el-icon-close" style="color: red;" @click.stop="delAddress" /> &nbsp;&nbsp;</span>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
        <keep-alive>
          <div class="tabs_content">
            <el-tabs v-model="TabsActiveName" :tab-position="'left'" type="border-card" style="height: 240px; margin-top: 10px;" @tab-click="handleClick">
              <el-tab-pane label="订购" name="dingGou">
                <div style="">
                  <el-form ref="form" size="mini" label-width="80px" class="orderForm" :model="orderForm">
                    <el-form-item label="" prop="" label-width="0">
                      <el-radio-group v-model="orderForm.resource">
                        <el-radio label="购买" />
                        <el-radio label="兑换" />
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="商品分类:" prop="address">
                      <el-select v-model="orderForm.goodsType" placeholder="请选择">
                        <el-option :value="1" label="地址1" />
                        <el-option :value="2" label="地址2" />
                        <el-option :value="3" label="地址3" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称:" prop="address">
                      <el-select v-model="orderForm.goodName" placeholder="请选择">
                        <el-option :value="1" label="地址1" />
                        <el-option :value="2" label="地址2" />
                        <el-option :value="3" label="地址3" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label-width="20px">
                      <el-button type="primary" icon="el-icon-plus" @click="addGoods">添加</el-button>
                    </el-form-item>
                  </el-form>
                  <lb-table
                    ref="lbTable"
                    class="tableOrder"
                    :summary-method="getSummaries"
                    show-summary
                    highlight-current-row
                    max-height="400"
                    element-loading-text="加载中"
                    :column="tableData.column"
                    :data="tableData.data"
                    :pagination="false"
                    :total="tableData.total"
                  />
                </div>
              </el-tab-pane>
              <!-- <el-tab-pane label="报修" name="baoXiu">
                <Repairs :open-flow="openFlow" :open-urge="openUrge" :open-back-order="openBackOrder" />
              </el-tab-pane> -->
              <el-tab-pane label="退瓶" name="tuiPing">
                <BottleReturn :open-flow="openFlow" :open-urge="openUrge" :open-back-order="openBackOrder" />
              </el-tab-pane>
              <el-tab-pane label="信息" name="xinXi">
                <Message :open-flow="openFlow" :open-urge="openUrge" :open-back-order="openBackOrder" />
              </el-tab-pane>
              <!-- <el-tab-pane label="投诉" name="touSu">
                <Complaint :open-flow="openFlow" :open-urge="openUrge" :open-back-order="openBackOrder" />
              </el-tab-pane>
              <el-tab-pane label="其他" name="qiTa">
                <Other :open-flow="openFlow" :open-urge="openUrge" :open-back-order="openBackOrder" />
              </el-tab-pane> -->
            </el-tabs>
          </div>
        </keep-alive>
      </div>

      <div class="right">
        <div><i class="el-icon-s-tools Setiing" @click="$refs.setting.open()" /> </div>
        <el-card class="chit_card cardBox_phone">
          <div slot="header" class="clearfix">
            <span>保险信息</span>
            <i style="float: right; padding: 3px 0;" class="el-icon-caret-bottom" @click="fold('car_main')" />
          </div>
          <div ref="car_main" class="card_main">
            <el-form ref="dataFormRight" :rules="rules" class="" :model="temp" label-position="right" label-width="80px">
              <el-form-item v-if="settingList.insurance" style="margin-top: 10px;" label="保险时间" prop="insurance">
                <el-date-picker
                  v-model="temp.insurance"
                  style="width: 60%;"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              <div style="display: flex; align-items: center;">
                <el-form-item style="width: 60%;" label="押金单号" prop="orderCode">
                  <el-input v-model="temp.orderCode" placeholder="请输入">
                    <el-button slot="append" class="append-search">查询</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item v-if="settingList.insuranceMan" label="售保人" style="width: 40%;" prop="insuranceMan">
                  <el-input v-model="temp.insuranceMan" placeholder="请输入">
                  <!-- <el-button slot="append" class="append-search">查询</el-button> -->
                  </el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-card>
        <el-card class="chit_card cardBox_phone cardBox_order">
          <div slot="header" class="clearfix">
            <span>最近三次订购记录</span>
            <span class="midOrder">订气总数:</span>
            <i style="float: right; padding: 3px 0;" class="el-icon-caret-bottom" @click="fold('order')" />
            <!-- <el-button style="float: right; padding: 3px 0;" type="text" @click="fold('order')">操作按钮</el-button> -->
          </div>
          <div ref="order" class="card_main">
            <div style=" height: 100%; overflow: auto;">
              <ul>
                <li class="likeTables">
                  <span class="one">订单号</span>
                  <span class="two">商品</span>
                  <span class="three">下单日期</span>
                  <span class="four">操作</span>
                </li>
                <li v-for="(l,i) in cmstop3" :key="i" class="likeTables">
                  <span class="one">

                    <el-link size="mini" type="info">
                      {{ l.orderCode }}
                    </el-link>
                  </span>
                  <span class="two">{{ l.goodsDesc }}<span style="color: green;"> X {{ l.goodsCount }}</span> </span>
                  <span class="three">{{ l.modifyTime&&parseTime(l.modifyTime,'{y}-{m}-{d}') }}</span>
                  <span class="four">
                    <el-link size="mini" type="primary" @click="openUrge(l)">
                      催气
                    </el-link>
                    <el-link size="mini" type="primary" @click="openBackOrder(l)">
                      退单
                    </el-link>
                    <el-link size="mini" type="primary" @click="openFlow(l)">
                      流转
                    </el-link>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
        <el-card class="chit_card cardBox_phone cardBox_shortcut">
          <div slot="header" class="clearfix">
            <span>快捷查询</span>
            <i style="float: right; padding: 3px 0;" class="el-icon-caret-bottom" @click="fold('shortcut')" />
            <!-- <el-button style="float: right; padding: 3px 0;" type="text" @click="fold('shortcut')">操作按钮</el-button> -->
          </div>
          <div ref="shortcut" class="card_main_shortcut">
            <div style=" height: 100%; padding: 5px; overflow: auto;10px">
              <el-form ref="shortcut" class="form2" :model="shortcutParams" label-position="right" label-width="80px">
                <el-form-item label="条件类型:" prop="csmPhone">
                  <el-input v-model="shortcutParams.csmPhone" placeholder="请输入">
                    <el-select slot="prepend" v-model="shortcutParams.select" style="width: 100px;" placeholder="请选择">
                      <el-option label="客户电话" :value="1" />
                      <el-option label="客户名称" :value="2" />
                      <el-option label="客户编码" :value="3" />
                      <el-option label="身份证" :value="4" />
                      <el-option label="使用证" :value="5" />
                      <el-option label="充值卡" :value="6" />
                    </el-select>
                  <!-- <el-button slot="append" class="append-search">查询</el-button> -->
                  </el-input>
                </el-form-item>
                <el-form-item label="客户地址:" prop="cmsAddress">
                  <el-input v-model="shortcutParams.cmsAddress" style="width: 70%;" placeholder="请输入" />

                  <el-button type="primary" icon="el-icon-search" @click="fastSearch">快速查询</el-button>

                </el-form-item>
              </el-form>
              <div class="fontItem">
                结果信息栏 --仅显示前100条
              </div>
              <ul ref="checkRadio">
                <li v-for="(l,i) in qkparams" :key="i" class="shortcut" style="margin: 5px 0;">
                  <el-radio v-model="radio1" class="shortcut_left" :label="i" @change="changeRadio" />
                  <div class="shortcut_right">
                    <div>{{ l.csmRgPhone }}({{ l.csmName }}) &nbsp; <span>编号:{{ l.csmCode }}</span> </div>
                    <div> {{ l.csmRgAddress }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </div>

    </div>

    <footer v-show="TabsActiveName!=='xinXi'" class="footer">
      <div class="left">
        <el-form ref="submitForm" class="footer_form" label-position="right" label-width="80px" size="mini" :model="submitForm">
          <el-form-item label="责任机构:" prop="address">
            <el-select v-model="submitForm.goodsType" placeholder="请选择">
              <el-option :value="1" label="地址1" />
              <el-option :value="2" label="地址2" />
              <el-option :value="3" label="地址3" />
            </el-select>
          </el-form-item>
          <el-form-item label="处理人:" prop="address">
            <el-select v-model="submitForm.goodName" placeholder="请选择">
              <el-option :value="1" label="地址1" />
              <el-option :value="2" label="地址2" />
              <el-option :value="3" label="地址3" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="TabsActiveName!=='touSu'" label="预约时间:" prop="appointment">
            <el-date-picker
              v-model="submitForm.appointment"
              style="width: 60%;"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <!-- <template v-slot:btns>
          <el-button type="primary" icon="el-icon-plus" @click="addGoods">添加</el-button>
        </template> -->
        </el-form>
        <div v-if="TabsActiveName=='dingGou'">
          <el-checkbox-group v-model="submitForm.checkList">
            <el-checkbox label="加急" />
            <el-checkbox label="需发票" />
            <el-checkbox label="自提" />
            <el-checkbox label="补单" />
            <el-checkbox label="月结" />
            <el-checkbox label="需回执" />
            <el-checkbox label="托管" />
            <el-checkbox label="安检" />
          </el-checkbox-group>
        </div>
      </div>
      <div v-if="TabsActiveName=='dingGou'" class="right_btns">
        <el-button type="primary" @click="submitOrder">提交订单（Shift+w）</el-button>
        <el-button type="primary" @click="submitOrderKeep">提交并继续（Shift+s）</el-button>
      </div>
      <div v-if="TabsActiveName=='baoXiu'" class="right_btns">
        <el-button type="primary" @click="submitOrder">提交报修登记</el-button>
      </div>
      <div v-if="TabsActiveName=='touSu'" class="right_btns">
        <el-button type="primary" @click="submitOrder">提交投诉登记</el-button>
      </div>
      <div v-if="TabsActiveName=='tuiPing'" class="right_btns">
        <el-button type="primary" @click="submitOrder">提交退瓶登记</el-button>
      </div>
      <div v-if="TabsActiveName=='qiTa'" class="right_btns">
        <el-button type="primary" @click="submitOrder">提交</el-button>
      </div>
    </footer>
    <Urge ref="urge" />
    <BackOrder ref="backOrder" />
    <Flow ref="flow" />
    <setting ref="setting" />
  </div>
</template>

<script>
  import phoneData from './phone'
  import cmsCodeData from './cmsCard'
  import cmstop3 from './cmstop3'
  import qkparams from './qkparams'
  import { parseTime } from '@/utils'
  export default {
    name: 'storeOrder',
    components: {
      BottleReturn: require('./components/bottleReturn.vue').default,
      // Repairs: require('./components/repairs.vue').default,
      // Complaint: require('./components/complaint.vue').default,
      // Other: require('./components/other.vue').default,
      Message: require('./components/message.vue').default,
      Urge: require('./Dialog/urge.vue').default,
      BackOrder: require('./Dialog/backOrder.vue').default,
      Flow: require('./Dialog/flow.vue').default,
      setting: require('./components/setting.vue').default
    },
    data() {
      return {
        loading: false,
        radio1: null,
        TabsActiveName: 'dingGou',
        rules: {
          IdCard: [{ required: true, message: '请输入', trigger: 'change' }],
          license: [{ required: true, message: '请输入', trigger: 'change' }],
          salesman: [{ required: true, message: '请输入', trigger: 'change' }],
          insurance: [{ required: true, message: '请输入', trigger: 'change' }],
          insuranceMan: [{ required: true, message: '请输入', trigger: 'change' }]
        },
        settingList: {
          // 身份证 IdCard 营业执照 license 销售员 salesman 保险 insurance  售保人 insuranceMan
          IdCard: true,
          license: true,
          salesman: true,
          insurance: true,
          insuranceMan: true
        },
        temp: {
          'fromPlat': null,
          'csmId': null,
          'csmCode': null,
          'csmName': null,
          'csmPhone': null,
          'contactPhone': null,
          'isPickUp': null,
          'contact': null,
          'csmAddressId': null,
          'csmAddress': null,
          'intSpare5': null,
          'csmType': null,
          'strSpare2': null,
          'saleMan': null,
          'lon': null,
          'lat': null,
          'orgId': null,
          'orgSNNo': null,
          'orgName': null,
          'ownerId': null,
          'ownerCode': null,
          'ownerName': null,
          'isUrgent': null,
          'isInvoice': null,
          'paymentMethod': null,
          'reStatus': null,
          'intSpare1': null,
          'remark': null,
          'orderFlag': null
        },
        shortcutParams: {

        },
        orderForm: {

        },
        submitForm: {
          checkList: ['需发票']
        },
        tableData: {
          column: [
            {
              prop: 'goodsName',
              label: '商品',
              align: 'center',
              width: 180,
              fixed: true
            },
            {
              prop: 'gprince',
              label: '市价',
              align: 'center',
              width: 80
            },
            {
              prop: 'gprefPrice',
              label: '特价',
              align: 'center',
              width: 80
            },
            {
              prop: 'gprefPrice',
              label: '优惠',
              align: 'center',
              width: '80'
            },
            {
              prop: 'gcount',
              label: '数量',
              width: 100,
              render: (h, { row, $index }) => <el-input oninput={(e) => this.changeNum(row, $index, e)} v-model={row.gcount}></el-input>
            },
            {
              prop: 'yf',
              label: '配送费',
              align: 'center',
              width: 80
            },
            {
              prop: 'fee1',
              label: '上楼费',
              align: 'center',
              width: 80
            },
            {
              prop: 'tip1',
              label: '服务费',
              align: 'center',
              width: 80
              // render: (h, { row }) => <el-link onClick={() => this.openDetail(row)}>{row.orderCode}</el-link>
            },
            {
              prop: 'receivable',
              label: '总应收',
              align: 'center',
              width: 150,
              render: (h, { row }) => <span >{this.goodsPrice(row)}</span>
            },
            {
              prop: '',
              label: '',
              align: 'center',
              width: 50,
              render: (h, { row, $index }) => <span onClick={() => this.delGoods($index) }><i class='el-icon-close' style='color: red;' /></span>
            }

          ],
          data: [{ 'id': 1634181774298, 'goodsName': '退残回收测试', 'goodsId': 946, 'gprince': 200, 'tag': 20000, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 0, 'fee1': 0, 'fee2': 0, 'baseFloorFee': 0, 'treceivable': '200.00', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 2, 'specCode': 'S0649', 'specName': '5型', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': 0, 'tip1': 0 }, { 'id': 1634181786832, 'goodsName': '15KG液化气', 'goodsId': 761, 'gprince': 0.01, 'tag': 1, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 0, 'fee1': 0, 'fee2': 0.01, 'baseFloorFee': 0, 'treceivable': '0.02', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0336', 'specName': '15KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': '0.00', 'fee21': '0.01', 'tip1': '0.00' }, { 'id': 1634181790522, 'goodsName': '赵越超专用', 'goodsId': 951, 'gprince': 0.01, 'tag': 1, 'definePrice': 0, 'diff': 0, 'gcount': 2, 'gprefPrice': 0, 'tip': 0, 'fee1': 0, 'fee2': 0, 'baseFloorFee': 0, 'treceivable': '0.02', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0336', 'specName': '15KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': 0, 'tip1': 0 }, { 'id': 1634184016558, 'goodsName': '15KG液化气（培训）', 'goodsId': 839, 'gprince': 100, 'tag': 10000, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 0, 'fee1': 11, 'fee2': 3, 'baseFloorFee': 0, 'treceivable': '114.00', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0336', 'specName': '15KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': '11.00', 'fee21': '3.00', 'tip1': '0.00' }, { 'id': 1634184026166, 'goodsName': '12KG液化气', 'goodsId': 733, 'gprince': 100, 'tag': 10000, 'definePrice': 0, 'diff': 0, 'gcount': 1, 'gprefPrice': 0, 'tip': 1, 'fee1': 3, 'fee2': 1, 'baseFloorFee': 0, 'treceivable': '105.00', 'gtId': 48, 'gtFlag': 1, 'priceScore': 0, 'requiredScore': 0, 'pricingMode': 1, 'specCode': 'S0488', 'specName': '12KG', 'storeCount': 0, 'isSpeicalPriceFloor': false, 'yf': '3.00', 'fee21': '1.00', 'tip1': '1.00' }]
        },
        num: null,
        addressItems: [],
        phoneItems: [],
        phoneData: {},
        cmsCodeData: {},
        cmstop3: [], // 最近三次订购数据
        qkparams: [] // 结果信息栏数据
      }
    },
    computed: {

    },
    mounted() {
      this.keyCodeForEvent()
    },
    methods: {
      parseTime,
      // 模拟组合键触发函数
      keyCodeForEvent() {
        const vm = this

        let code = 0
        let code2 = 0
        document.onkeydown = function(e) {
          const evn = e || event
          const key = evn.keyCode || evn.which || evn.charCode
          // console.log(key)
          if (key === 16) {
            code = 1
          }
          if (key === 83) {
            code2 = 1
          }
          if (key === 87) {
            code2 = 2
          }
          if (code === 1 && code2 === 1) {
            // alert('shift+S')
            vm.submitOrderKeep()
            // this obj to do something
            code = 0
            code2 = 0
          }
          if (code === 1 && code2 === 2) {
            // alert('shift+W')
            vm.submitOrder()
            // this obj to do something
            code = 0
            code2 = 0
          }
        }
        document.onkeyup = function(e) {
          if (e.keyCode === 16) {
            code = 0
          }
          if (e.keyCode === 83) {
            code2 = 0
          }
          if (e.keyCode === 87) {
            code2 = 0
          }
        }
      },
      searchForPhone() {
        this.phoneData = phoneData.data
        this.phoneItems = this.phoneData.phoneItems
        this.addressItems = this.phoneData.addressItems
        this.temp = { ...this.phoneData }
        this.cmstop3 = cmstop3.data
        console.log(JSON.parse(JSON.stringify(phoneData.data)))
        // 通过电话获取到cmsCode
        var csmCode = this.phoneData.csmCode
        if (csmCode) {
          this.cmsCodeData = cmsCodeData.data
          console.log(cmsCodeData.data)
        }
      },
      // 保存客戶
      saveUser() {
        console.log(JSON.parse(JSON.stringify(this.cmstop3)))
      },
      // 选择关联电话联系人
      selectPhone(i, data) {
        // console.dir(this.$refs.selectPhone)
        for (var item of this.$refs.selectPhone.children) {
          item.style.backgroundColor = '#fff'
        }
        this.$refs.selectPhone.children[i].style.backgroundColor = 'rgba(1,153,159,0.4)'
        console.log(data)
        this.temp.contact = data.contact
        this.temp.contactPhone = data.phone
        this.temp = { ...this.temp }
      },
      // 删除关联电话
      delPhone() {
        const vm = this
        vm.$confirm('是否删除此关联电话?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message.success('删除成功')
          })
          .catch((e) => {
            this.$message.info('已取消删除操作')
          })
      },
      // 选择关联地址
      selectAddress(i, data) {
        // console.dir(this.$refs.selectPhone)
        for (var item of this.$refs.selectAddress.children) {
          item.style.backgroundColor = '#fff'
        }
        this.$refs.selectAddress.children[i].style.backgroundColor = 'rgba(1,153,159,0.4)'
        console.log(data)
        this.temp.csmAddress = data.csmAddress
        this.temp = { ...this.temp }
      },
      // 删除关联地址
      delAddress() {
        const vm = this
        vm.$confirm('是否删除此关联地址?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message.success('删除成功')
          })
          .catch((e) => {
            this.$message.info('已取消删除操作')
          })
      },
      // 折叠效果
      fold(refItem) {
        const classname = event.target.className
        const flag = classname.includes('bottom')
        if (flag) {
          event.target.className = 'el-icon-caret-top'
        } else {
          event.target.className = 'el-icon-caret-bottom'
        }
        var height = this.$refs[refItem].style.height
        console.log(height)
        var changeNum = '115px'
        if (refItem === 'shortcut') {
          changeNum = '380px'
        }
        console.log(changeNum)
        if (height === '0px') {
          this.$refs[refItem].style.height = changeNum
        } else {
          this.$refs[refItem].style.height = '0'
        }
      },
      // 快速查询
      fastSearch() {
        // console.log(this.shortcutParams)
        this.qkparams = qkparams.data
        console.log(JSON.parse(JSON.stringify(this.qkparams)))
      },
      // 快捷查询的单选事件
      changeRadio(val) {
        // console.log(val)
        console.log(this.qkparams[val])
        for (var item of this.$refs.checkRadio.children) {
          item.style.backgroundColor = '#fff'
        }
        this.$refs.checkRadio.children[val].style.backgroundColor = 'rgba(1,153,159,0.2)'
      },
      // 添加商品
      addGoods() {
        console.log(this.tableData.data)
      },
      // 合计
      getSummaries(param) {
        const { columns, data } = param
        // console.log(data)
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            // console.log(sums[index])
            sums[index] = ''
          }
        })

        return sums
      },
      // 应收
      goodsPrice(row) {
        const value = (row.gprince * 1 - row.gprefPrice * 1) * row.gcount * 1 + row.fee1 * 1 + row.yf * 1 + row.tip1 * 1
        row.receivable = value
        return value
      },
      // 选择数量
      changeNum(row, index) {
        // console.log(row)
        // console.log(index)
        const value = event.target.value
        row.gcount = value
      },
      // 删除商品
      delGoods(index) {
        const vm = this
        vm.$confirm('是否将该商品移除列表?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.tableData.data.splice(index, 1)
            // this.$message.success('删除成功')
          })
          .catch((e) => {
            // this.$message.info('已取消删除操作')
          })
      },
      // 提交并继续
      submitOrderKeep() {
        if (this.TabsActiveName !== 'dingGou') return
        this.$message.info('提交并继续')
      },
      // 提交订单
      submitOrder() {
        if (this.TabsActiveName !== 'dingGou') return
        this.$message.info('提交订单')
      },
      // 流转信息
      openFlow(row) {
        this.$refs.flow.open(row)
      },
      // 催气
      openUrge(row) {
        this.$refs.urge.open(row)
      },
      // 退单
      openBackOrder(row) {
        this.$refs.backOrder.open(row)
      },
      handleClick(tab) {
        console.log(tab.name)
      }

    }
  }
</script>

<style lang='scss' scoped>
.main {
  // position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #fff;
  box-sizing: border-box;
  flex-wrap: wrap;
  // .left {
  //   width: 65%;
  // }
  // .right {
  //   margin-left: 20px;
  //   flex: 1;
  // }
}
.main_one {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  .left {
    width: 65%;
  }
  .right {
    margin-left: 20px;
    flex: 1;
  }
}
.moneyinfo {
  width: 200%;
  height: 19px;
  margin: 0 0 9px 10px;
  margin-left: 10px;
  font-size: 14px;
  line-height: 19px;
  color: #333;
  span {
    margin-right: 8px;
  }
}
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 33%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 64%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
  .clearfix {
    font-size: 14px;
  }
}

.cardBox_phone {

  /deep/ .el-card__body {
    // padding:5px 10px;
    padding: 0;
  }
  /deep/ .el-card__header {
    height: 24px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    // padding: 0;
    line-height: 24px;
    color: #373A3C;
    background: #e3e3e3;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  .text {
    display: flex;
    // border: 1px solid #dddddd;
    // border-top: 0px solid #dddddd;
    justify-content: space-between;
    height: 27px;
    font-size: 14px;
    line-height: 27px;
    color: #373A3C;
    text-indent: 1em;
  }
}
.chit_card {
  width: 100%;
  margin-bottom: 10px;
  //   /deep/ .el-card__body {
  //   padding:5px 10px;
  // }
  .card_main {
    height: 115px;
    overflow: hidden;
    transition: all 0.3s;
  }
  .card_main_shortcut {
    height: 380px;
    overflow: hidden;
    transition: all 0.3s;
  }
  .midOrder {
    margin-left: 55px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #373a3c;
    text-align: left;
  }
}
.cardBox_order {
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  // height: 19px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #373a3c;
  text-align: left;
}
.likeTables {
  display: flex;
  line-height: 25px;
  border-bottom: 1px solid #ddd;
  .one {
    width: 20%;
    text-align: center;
  }
  .two {
    width: 40%;
    text-align: center;
  }
  .three {
    width: 20%;
    text-align: center;
  }
  .four {
    width: 20%;
    text-align: center;
  }
}
.shortcut {
  display: flex;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  // width: 289px;
  // height: 41px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #373a3c;
  text-align: left;
  border-bottom: 1px solid #ddd;
  .shortcut_left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    margin: 0;
    /deep/ .el-radio__label {
      display: none;
    }
  }
}
.fontItem {
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  // margin:2px 10px
  font-size: 14px;
  font-weight: 400;
  color: #999;
  text-align: left;
  text-indent: 1em;
}
.tabs_content {
  /deep/ .el-tabs__content {
    height: 100%;
    overflow: auto;
  }
  /deep/ .el-tabs__nav-scroll {
    .el-tabs__item {
      height: 40px;
      padding: 4px 8px;
      line-height: 30px;
      box-sizing: border-box;
    }

    width: 50px;
  }
}
.tableOrder {
  /deep/ .el-input__inner {
    padding: 0 8px;
  }
}
.footer {
  // position: absolute;
  // bottom: 0;
  // bottom: -5px;
  z-index: 2;
  display: flex;
  width: 100%;
  background-color: #fff;
  // padding: 5px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  .left {
    width: 70%;
  }
  .right_btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .footer_form {
    display: flex;
    flex-wrap: wrap;
  }
}
.orderForm {
  display: flex;
}
.Setiing {
  float: right;
  font-size: 18px;
  color: #01999F;
  &:hover {
    color: #989fc1;
  }
}
</style>
